<template>
  <el-container style="height: 800px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <div>
        <slot name="topOfnav"></slot>
        <leftNav></leftNav>
      </div>
    </el-aside>
    <el-container class="container">
      <Header></Header>
      <el-main> <router-view></router-view> </el-main>
    </el-container>
  </el-container>
</template>

<script>
import leftNav from "@/components/common/leftNav.vue";
import Header from "@/components/common/Header.vue";
export default {
  components: {
    leftNav,
    Header,
  },
  data() {
    return {
      userName: this.$store.getters.userName,
      curPath: document.location.pathname,
    };
  },
  methods: {
    showpath() {
      console.log("this.$router.path :>> ", this.$router);
      console.log("document.location.path :>> ", document.location.pathname);
    },
    showProfile() {
      console.log("show Profile");
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  flex-direction: row;
}

.patharea {
  width: 80%;
  text-align: left;
}
.userarea {
  display: flex;
  width: 20%;
}
.userarea-item {
  flex: 1;
  align-content: center;
}

.el-aside {
  color: #333;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>
